<template>
    <div class="box">
        <div class="box-left">
            <div class="box-left-logo">
                企业管理平台
            </div>
            <div class="box-left-menu">
                菜单列表
            </div>
        </div>
        <div class="box-right">
            <div class="box-right-title">
                企业级别RBAC管理系统
            </div>
            <div>
                欢迎您：admin
            </div>
            <div class="box-right-content">
                <div class="box-right-content-tabbar">
                    首页/用户管理
                </div>
                <div class="box-right-content-main">
                    <router-view></router-view>
                </div>
                <div class="box-right-content-footer">
                    企业级RBAC权限管理系统|Copyright © 2025 All Rights Reserved|v1.0.0
                </div>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    data() {
        return {

        }
    },
    methods: {

    }
}
</script>
<style lang="less" scoped>
.box {
    width: 100vw;
    height: 100vh;
    display: flex;
    &-left {
        width: 240px;
        height: 100vh;
        color: #fff;
        &-logo {
            height: 60px;
            background-color: #0F172A;
        }

        &-menu {
            height: calc(100vh - 60px);
            background-color: #1E293B;
        }
    }

    &-right {
        flex:1;
        &-title {
            height: 60px;
        }

        &-content {
            height: calc(100vh - 60px);
            &-tabbar {
                height: 80px;
            }

            &-main {
                height: calc(100vh - 80px - 60px - 60px);
            }

            &-footer{
                height: 60px;
            }
        }
    }
}
</style>